import React, {Component} from 'react';
import {Button} from 'antd';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';
import Ajax from '../../common/ajax';

class GoodsList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 109,
            style: {
                marginBottom: '10px'
            },
            dataset: {},
            layout: '',
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            goodsList: [],
        };
    }

    componentWillReceiveProps(nextProps) {
        const {data:oldData} = this.props;
        const {dataset:oldDataset, showNum:oldShowNum, isPage:oldIsPage} = oldData || {};
        const {block:oldBlock = {}, ty:oldTy} = oldDataset || {};
        const {data} = nextProps;
        const {dataset, showNum, isPage} = data;
        const {block = {}, ty} = dataset;

        if (JSON.stringify(oldBlock) != JSON.stringify(block) || isPage != oldIsPage || showNum != oldShowNum) {
            this._getGoodsList(nextProps);
        }
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {goodsList} = this.state;
        var {style, dataset, layout, isPage = '0'} = data || {};

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'goodsMListWrap cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                <div className={layout == 'single' ? 'goodsList gModList_single' : 'goodsList'}>
                    {
                        goodsList && goodsList.length > 0 ?
                            goodsList.map(function (goods, index) {
                                return (
                                    <div className="gModList__item"
                                         key={'gModList__item__' + (goods.goodsId || index)}>
                                        <div
                                            className="gModList__item__imgWrap">
                                            <img className="gModList__item__img"
                                                 src={goods.imageUrl}/>
                                        </div>
                                        <div className="gModList__item__info">
                                            <div
                                                className="gModList__item__name">{goods.name}</div>
                                            <div
                                                className="gModList__item__price"
                                            >
                                                <span
                                                    className="gModList__item__price__unit"
                                                >￥</span>{goods.salePrice}
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                            :
                            (
                                <div className="gModList__mod">
                                    <div className="gModList__list gModList__list_empty">
                                        没有商品哦~
                                    </div>
                                </div>
                            )
                    }
                    {
                        goodsList && goodsList.length > 0 && isPage == '1' ?
                            (
                                <div className="more-loading">
                                    <Button type="default">加载更多</Button>
                                </div>
                            )
                            : null
                    }
                </div>
            </div>
        );
    }

    componentDidMount() {
        this._getGoodsList(this.props);
    }

    _getGoodsList(props) {
        const {data} = props;
        const {dataset, showNum = 10, isPage} = data || {};
        const {block, ty} = dataset || {};
        var _self = this;

        if (!block) {
            this.setState({
                goodsList: [],
            });
            return;
        }
        var ajaxUrl = '/openapi/CHome/getDataBlockContent';
        var ajaxParams = {module_id: block.id};

        if (ty == 2) {
            ajaxUrl = '/openapi/CHome/categoryPage';
            ajaxParams = {catId: block.category_id};
        }
        if (isPage == 0) { //不需要分页有效
            ajaxParams.page_size = showNum;
        }

        Ajax.G(ajaxUrl, ajaxParams, function (res) {
            var result = res['result'];

            _self.setState({
                goodsList: result['dataBlockContent'] || result['goodsList'],
            });
        });
    }
}

export default GoodsList;
